<template>
  <div style="overflow:hidden;transition:all 0.5s linear ">
     <!-- <x-header :left-options="{showBack: false}">首页</x-header > -->
     <swiper  loop auto :list="banner" :index="banner_index" @on-index-change="demo07_onIndexChange"></swiper>

     <search :results="results" v-model="value"  :auto-fixed="true" auto-scroll-to-top top="0px" position="relative"  ></search>

    <!-- <div > -->
      <sticky scroll-box="vux_view_box_body" :offset="49" :check-sticky-support="false">

        <!-- <div class="tabheadernav" style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;"> -->
        <scroller lock-y :scrollbar-y=false class="tabheadernav">
          <tab style="position: relative; white-space:nowrap; display:inline-block" active-color='#1acbbb' :line-width="1"  v-model="index">
              <tab-item class="vux-center"  v-for="(item, index) in list2" :key="index">{{item}}</tab-item>
          </tab>
        </scroller>
        <!-- </div> -->

          <div>

          </div>
          <swiper v-model="index"  height="580px" >
            <swiper-item v-for="(item, index) in list2" :key="index"  >
              <!-- <div class="tab-swiper vux-center">{{item}} Container</div> use-pullup @on-pullup-loading="loadMore"  :aspect-ratio=""-->
              <scroller lock-x scrollbar-y   @on-scroll-bottom="onScrollBottom">
                  <div class="list-box">
                    <panel header="图文组合列表"   :list="list"  type="1"  class="boxafer"></panel>
                  </div>
              </scroller>
            </swiper-item>
          </swiper>

      </sticky>

    <!-- </div> -->
<!-- <div>ff</div> -->


<!--     <div>style="width:500px;"
       <tab :line-width=2 active-color='#fc378c' v-model="index" >
        <tab-item class="vux-center"  v-for="(item, index) in list2" :key="index">{{item}}</tab-item>
      </tab>
      <swiper v-model="index" height="100px" :show-dots="false">
        <swiper-item v-for="(item, index) in list2" :key="index">
          <div class="tab-swiper vux-center">{{item}} Container</div>
        </swiper-item>
      </swiper>
    </div> -->

  </div>
</template>

<script>
import { XHeader ,Swiper,Search,Sticky,Tab,TabItem,SwiperItem,Panel,Scroller } from 'vux'

export default {
  components: {
    Swiper,
    XHeader,
    Search,
    Tab,
    TabItem,
    Sticky,
    SwiperItem,
    Panel,
    Scroller
  },
  data () {
    return {
    list2: ['精选', '美食', '电影',  '外卖外', '电影', '电影',  '外卖外', '电影'], //切换导航标题
    index: 0,  //导航默认选项
    banner: [{
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一朵fua'
          }, {
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一辆车'
          }, {
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一次旅行'
          }],
    banner_index: 0,//bannerindex
    value:"",  //搜索框值
    results: [{title:"fasf",other:12}],  //搜索框提示文字数组
    list: [{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }],
      // hei:110,
      scroll: '',

    }
  },
  methods: {
    demo07_onIndexChange (index) {
      this.banner_index = index
    },
   scrollsbody() {
    this.scroll = document.body.scrollTop;
    console.log(this.scroll)
    if ((this.scroll>=100 && this.scroll<=169) || ( this.scroll>=200 && this.scroll<379)) {
      document.body.scrollTop=180;
    }
   },
   onScrollBottom(){
    // alert("f")
    var cs=[{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '2222',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'xxx',
        desc: 'x',
        url: '/component/cell'
      }];
   this.list=this.list.concat(cs);
    console.log("f")
   }

  },
  mounted () {
    this.$nextTick(function() {
      // alert("f")
      this.hei=document.body.clientHeight;
    var _this=this;
    // alert(this.hei)
     window.addEventListener('scroll', this.scrollsbody)


    })
  }
}
</script>
<style lang="scss">
#app .vux-slider > .vux-indicator > a > .vux-icon-dot, .vux-slider .vux-indicator-right > a > .vux-icon-dot{
  width:7px;
  height:7px;
  border-radius: 100%;
  transition: all 0.3s ease-in;
  background-color: rgba(255,255,255,.3);
  border:1px solid  rgba(255,255,255,.2);
}
#app .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active {
  width:13px;
  height:13px;
    box-shadow: -2px 2px 20px #fff;
   border:1px solid  rgba(255,255,255,.5);
  background-color: rgba(255,255,255,.9)
}
.tabheadernav {
  border-bottom: 1px solid #eee;
  .vux-tab .vux-tab-item {
    display: inline-block;
    padding: 0 10px;
    width:auto;
    background: transparent;
    min-width: 70px;
    max-width: 100px;
  }
}
.vux-slider , .vux-slider > .vux-swiper {
  // overflow: visible!important;
}
#app .weui-panel:first-child{
//   margin-top: -55px;
}
#app .boxafer {
  a.weui-media-box:nth-last-child(1) {
    padding-bottom: 150px;
    // &::after{
    //   content: ".";
    //   display:inline-block;
    //   height:200px;
    //   position:absolute;
    // }
  }
}
.list-box {
  .weui-panel__hd {
    display:none;
  }
}
</style>
